.djradio-detail {
  background-color: #f2f2f2;

  .detail-container {
    width: 980px;
    margin: 0 auto;
    background: url('@/assets/image/song-sheet/background.png') repeat-y center 0;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .detail-content {
      display: inline-block;
      width: calc(100% - 348px);
      padding: 27px 39px 40px;
      vertical-align: top;

      .detail-top {
        .cover-dj {
          width: 208px;
          height: 208px;
          padding-right: 29px;
          margin-top: -3px;
          background: url('@/assets/image/my-music/coverall.png') no-repeat;
          background-position: 0 -1285px;

          img {
            width: 200px;
            height: 200px;
            margin-top: 4px;
            margin-left: 4px;
          }
        }

        .cnt {
          width: calc(100% - 231px);

          .hd {
            .icon {
              width: 56px;
              height: 24px;
              background: url('@/assets/image/icon.png') no-repeat;
              background-position: 0 -1014px;
            }

            .tit {
              margin-left: 8px;
              font-size: 20px;
              font-weight: normal;
              line-height: 24px;
            }
          }

          .user {
            margin-top: 12px;
            margin-bottom: 20px;

            .face {
              width: 35px;
              height: 35px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .name {
              span {
                margin-right: 2px;
                margin-left: 10px;
                font-size: 12px;
                color: #0c73c2;
              }

              span:hover {
                text-decoration: underline;
                cursor: pointer;
              }

              img {
                display: inline-block;
                width: 13px;
                height: 13px;
                vertical-align: middle;
              }
            }
          }

          .btns {
            float: left;
            margin-bottom: 25px;

            .btn,
            .btn i {
              float: left;
              height: 31px;
              min-width: 23px;
              font-size: 12px;
              line-height: 30px;
              cursor: pointer;
              background: url('@/assets/image/icon-button.png') no-repeat 0 9999px;
            }

            .btn {
              height: 31px;
              min-width: 23px;
              padding: 0 5px 0 0;
              margin-right: 6px;
              font-family: simsun, '\5b8b\4f53', sans-serif;
              line-height: 30px;
              cursor: pointer;
              border: none;

              &.subscribe {
                color: #fff;
                background-position: right -2163px;
              }

              &.subscribe i {
                background-position: 0 -2125px;
                padding: 0 7px 0 30px;
              }

              &.play {
                color: #333;
                background-position: right -2325px;
              }

              &.play i {
                background-position: 0 -2285px;
                padding: 0 7px 0 30px;
              }

              &.share {
                color: #333;
                background-position: right -1020px;
              }

              &.share i {
                background-position: 0 -1225px;
                padding: 0 7px 0 30px;
              }
            }
          }

          .intr {
            .cat {
              text-align: left;

              .category {
                display: inline-block;
                height: 16px;
                padding: 0 6px;
                margin-right: 7px;
                overflow: hidden;
                font-size: 12px;
                line-height: 18px;
                color: #c00;
                vertical-align: middle;
                border: 1px solid #c00;
                cursor: pointer;
              }

              pre {
                margin-top: -17px;
                line-height: 18px;
                text-indent: 73px;
              }
            }

            .toggledesc {
              color: #0c73c2;
              text-align: right;

              &:hover {
                text-decoration: underline;
              }

              .icon {
                display: inline-block;
                width: 11px;
                height: 8px;
                background: url('@/assets/image/icon.png') no-repeat;
                background-position: -45px -520px;
              }

              .open-desc {
                background-position: -65px -520px;
              }
            }
          }
        }
      }

      .song {
        padding-left: 5px;
        margin-top: 28px;
        color: #000;

        .title {
          border-bottom: 2px solid #c20c0c;
          padding-bottom: 6px;

          .sub {
            margin: 8px 0 0 20px;
          }

          .out {
            margin: 5px 20px 0;

            i {
              width: 16px;
              height: 16px;
              vertical-align: middle;
              background: url('@/assets/image/icon.png') no-repeat;
              background-position: -34px -863px;
            }

            a {
              color: #0c73c2;

              &:hover {
                text-decoration: underline;
              }
            }
          }

          .sort {
            .btn {
              height: 25px;
              cursor: pointer;
              background: url('@/assets/image/icon-sort.png') no-repeat 0 9999px;

              &.desc {
                width: 29px;
                background-position: 0 0;
              }

              &.desc:hover {
                background-position: 0 -60px;
              }

              &.desc.btn-active {
                cursor: default;
                background-position: 0 -30px;
              }

              &.asc {
                width: 28px;
                background-position: -40px 0;
              }

              &.asc:hover {
                background-position: -40px -60px;
              }

              &.asc.btn-active {
                cursor: default;
                background-position: -40px -30px;
              }
            }
          }
        }

        .list {
          width: 100%;
          border: 1px solid #d9d9d9;
          border-top: none;
          text-align: left;

          tr {
            height: 55px;

            td {
              padding: 0 10px;
              color: #666;
            }

            &:nth-child(2n) {
              background-color: #f7f7f7;
            }
          }

          tr:hover {
            background-color: #e6e6e6;

            td:nth-child(2) {
              .name {
                width: 183px;
              }

              .ic {
                display: block;
              }
            }
          }

          td:nth-child(1) {
            width: 51px;
            padding: 0 10px 0 20px;
            line-height: 55px;
            color: #999;

            i {
              width: 17px;
              height: 17px;
              cursor: pointer;
              cursor: pointer;
              background: url('@/assets/image/icon-table.png') no-repeat;
              background-position: 0 -103px;

              &:hover {
                background: url('@/assets/image/icon-table.png') no-repeat;
                background-position: 0 -128px;
              }

              &.active {
                background: url('@/assets/image/icon-table.png') no-repeat;
                background-position: -20px -128px;
              }
            }
          }

          td:nth-child(2) {
            position: relative;
            width: 230px;
            padding: 0;
            color: #333;

            .ic {
              position: absolute;
              top: 20px;
              right: 0;
              display: none;
              width: 61px;
              height: 16px;
              text-align: right;
              background-color: #e6e6e6;

              .icon {
                margin: 2px 0 0 4px;
                cursor: pointer;
              }

              .u-icn1 {
                width: 13px;
                height: 16px;
                background: url('@/assets/image/icon.png') no-repeat;
                background-position: 0 -700px;
              }

              .u-icn2,
              .u-icn3 {
                width: 18px;
                height: 16px;
                background: url('@/assets/image/icon-table.png') no-repeat 0 9999px;
              }

              .u-icn2 {
                background-position: 0 -195px;
              }

              .u-icn3 {
                background-position: -81px -174px;
              }
            }
          }

          td:nth-child(3) {
            width: 60px;
          }

          td:nth-child(4) {
            width: 70px;
          }

          td:nth-child(5) {
            width: 66px;
          }

          td:nth-child(6) {
            width: 40px;
          }
        }
      }
    }
  }

  .detail-side {
    display: inline-block;
    width: 270px;
    vertical-align: top;
  }
}